<template>
  <div class="all">
    <div class="header">
      <div class="search bar1">
        <form>
          <input
            type="text"
            placeholder="请输入您要搜索的内容..."
            @input="searchChangeIpt"
            v-model="searchValue"
          />
          <button @click="searchBtnClick">搜索</button>
          <button class="clearBtn" @click="clearBtn" v-show="searchValue">
            x
          </button>
          <label>
            <!-- HTML 上传文件 -->
            <button class="addbtn">上传文件</button>
            <div class="file-input">
              <input type="file" ref="file" @change="selectFile" />
            </div>
          </label>
        </form>
      </div>
    </div>
    <div class="main">
      <div class="file-list-show">
        <ul>
          <li>序号</li>
          <li class="file-name">文件名</li>
          <li>上传时间</li>
          <li>文件大小</li>
          <li>操作</li>
        </ul>
        <ul class="file-item" v-for="(item, index) in showList" :key="item.id">
          <li>{{ currentPageIndex | dfIndex(index) }}</li>
          <li>{{ item.name }}</li>
          <li>{{ item.date | dfDate }}</li>
          <li>{{ item.size | dfSize }}</li>
          <li>
            <div class="list-button">
              <!-- HTML 数据列表内按钮 btn -->
              <button @click="handleClickEdit(item.id, item.name)">修改</button>
              <button @click="handleClickDelete(item.id)">删除</button>
            </div>
          </li>
        </ul>
        <div class="pageComponentsTest">
          <page-component
            :page-config="pageConfigTotal"
            @changeCurrentPage="changePage"
          ></page-component>
        </div>
      </div>
    </div>
    <!-- HTML 删除功能对话框 Del dialog-->
    <dialog-cpm :showDialog="deleteDialogShow">
      <div slot="content" class="dialog-delete-btn">
        <span>确认删除此条数据？</span>
        <button @click="confirmTrue">确认</button>
        <button @click="confirmFalse">返回</button>
      </div>
    </dialog-cpm>
    <!-- HTML 修改功能对话框 edit dialog -->
    <dialog-cpm :width="500" :height="200" :showDialog="editDialogShow">
      <div slot="content" class="dialog-edit-btn">
        <span>请输入文件的新名称：</span>
        <div class="input">
          <input type="text" v-model="editData.name" />
        </div>
        <button @click="editConfirmTrue">确认</button>
        <button @click="editConfirmFalse">返回</button>
      </div>
    </dialog-cpm>
  </div>
</template>

<script>
// TAG
import pageComponent from '../../../components/common/pageComponent.vue'
import DialogCpm from '../../../components/common/dialogCpm.vue'

import { getFileList, delData, editData, addData } from '@/network/home.js'
export default {
  name: 'FileListShow',
  components: {
    pageComponent,
    DialogCpm
  },
  data() {
    return {
      fileList: [],
      pageConfigTotal: {
        total: 0,
        pageSize: 15,
        pageNo: 1
      },
      showList: [],
      currentPageIndex: 0,
      searchValue: '',
      deleteDialogShow: false,
      deleteId: '',
      editDialogShow: false,
      editData: {}
    }
  },
  created() {
    this.getFileList()
  },
  computed: {
    // ? 返回搜索结果 - array
    cpSearchBtnClick() {
      return this.fileList.filter(i => i.name.includes(this.searchValue.trim()))
    }
  },
  methods: {
    // TAG 文件上传 fileonload
    async selectFile() {
      const fd = new FormData()
      fd.append('file', this.$refs.file.files[0])
      console.log(fd.get('file'))
      // const res = await addData(fd)
      // console.log(res)
      const { data: res } = await addData(fd)
      this.reFreshList(res)
    },
    // TAG 列表按钮 list btn
    // ? 修改按钮点击触发
    handleClickEdit(id, name) {
      this.editDialogShow = true
      this.editData.id = id
      this.editData.name = name
    },
    // ? 框内点击确定
    async editConfirmTrue() {
      const { data: res } = await editData(this.editData)
      this.reFreshList(res)
      this.editDialogShow = false
    },
    // ? 框内点击返回
    editConfirmFalse() {
      this.editDialogShow = false
    },
    // ? 删除按钮点击触发
    handleClickDelete(id) {
      this.deleteDialogShow = true
      this.deleteId = id
    },
    // ? 框内点击确定
    async confirmTrue() {
      const { data: res } = await delData(this.deleteId)
      this.reFreshList(res)
      this.deleteDialogShow = false
    },
    // ? 框内点击返回
    confirmFalse() {
      this.deleteDialogShow = false
      this.deleteId = ''
    },
    // TAG 搜索框 input search
    // ?  input 清空按钮
    clearBtn() {
      this.searchValue = ''
      this.getFileList()
    },
    // ? input value 为空重新获取列表
    searchChangeIpt() {
      if (this.searchValue.length < 1) {
        this.getFileList()
      }
    },
    // ? 搜索按钮点击
    searchBtnClick() {
      this.searchValue && this.reFreshList(this.cpSearchBtnClick)
    },
    // TAG 分页 page limit
    changePage(i) {
      this.pageConfigTotal.pagenNo = i
      const size = this.pageConfigTotal.pageSize
      const start = size * (i - 1)
      const end = size * i
      this.showList = this.fileList.slice(start, end)
      this.currentPageIndex = start
    },
    // ? 抽离的方法 - 赋值 fileList 和 赋值分页配置
    reFreshList(list) {
      this.fileList = list
      this.pageConfigTotal.total = list.length
      this.changePage(this.pageConfigTotal.pageNo)
    },
    // TAG 网络请求 network
    // ? 从后端获取列表数据
    async getFileList() {
      const { data: res } = await getFileList()
      this.reFreshList(res)
    }
  },
  filters: {
    // ? 格式化序号
    dfIndex(v, i) {
      return v + i + 1
    },
    // ? 文件大小单位转换 m g
    dfSize(size) {
      const kb = size / 1024
      const m = kb / 1024
      const g = m / 1024
      let result = size
      if (kb > 1024) {
        if (m > 1024) {
          result = g.toFixed(2)
          return `${result} GB`
        } else {
          result = m.toFixed(2)
          return `${result} MB`
        }
      } else {
        result = kb.toFixed(2)
        return `${result} KB`
      }
    },
    //  格式化日期
    dfDate(date) {
      const time = new Date(date)
      let ret = ''
      const y = time.getFullYear()
      const m = (time.getMonth() + 1 + '').padStart(2, 0)
      const d = (time.getDate() + '').padStart(2, 0)
      ret = `${y} - ${m} - ${d}`
      return ret
    }
  }
}
</script>

<style scoped>
/* STYLE  */
div.all {
  position: relative;
}
button {
  width: 27%;
  outline: none;
  background-color: #fff;
  border: 1px solid #2cc7bf;
  border-radius: 6px;
  cursor: pointer;
}

.header {
  background-color: #fff;
  height: 100px;
  border-bottom: 2px solid rgb(133, 33, 33);
  border-radius: 0 0 0 25px;
}
.main {
  position: relative;
  height: calc(100vh - 170px);
  padding: 20px 0 0;
  background-color: #ffffffda;
}
.pageComponentsTest {
  padding-top: 10px;
}
/* STYLE 数据列表 fileList ul - li */
.file-list-show {
  position: absolute;
  width: 100%;
  left: 50%;
  transform: translate(-50%, 0);
  text-align: center;
  font-weight: bold;
}
.file-list-show ul {
  width: 100%;
}
.file-list-show ul li {
  display: inline-block;
  height: 32px;
  margin-top: -4px;
  overflow: hidden;
  padding: 5px 0;
  text-align: center;
  border: 2px solid #b8d5f3;
  white-space: nowrap;
  text-overflow: ellipsis;
  background-color: #a2d9f3;
}
.main .file-list-show .file-name {
  text-align: center;
}
.file-list-show ul li:nth-child(1) {
  width: 7%;
}
.file-list-show ul li:nth-child(2) {
  text-align: left;
  padding-left: 2vw;
  width: 30%;
  border-left: none;
  border-right: none;
}
.file-list-show ul li:nth-child(3) {
  width: 18%;
  border-right: none;
}
.file-list-show ul li:nth-child(4) {
  padding-right: 3vw;
  text-align: right;
  width: 13%;
  border-right: none;
}
.file-list-show ul li:nth-child(5) {
  width: 19%;
}
.file-list-show .file-item li {
  color: rgb(100, 75, 75);
  font-weight: normal;
  border-top: none;
  text-align: center;
  background-color: #fff;
}
.list-button {
  margin-top: -2px;
}
.list-button button {
  margin: 0 5%;
  height: 21px;
}
.list-button button:hover {
  font-weight: bold;
  border-radius: 27%;
}
.file-item li button:nth-child(2) {
  color: red;
  border-color: rgb(123, 69, 221);
}
/* STYLE 搜索框 search from - input */
/* 文件上传 */
.file-input {
  position: absolute;
  left: -8vw;
  width: 5vw;
  transform: translateY(-100%);
  opacity: 0;
}
div.search {
  padding: 30px 0;
}
.search form {
  position: relative;
  width: 300px;
  margin: 0 auto;
}
.search input,
.search button {
  border: none;
  outline: none;
}
.search input {
  width: 100%;
  height: 42px;
  padding-left: 13px;
}
.search button {
  height: 42px;
  width: 42px;
  cursor: pointer;
  position: absolute;
}
.search button:hover {
  color: #f9f0da;
  background-color: rgb(61, 143, 132);
}
/*搜索框1*/
.bar1 input {
  border: 2px solid #7ba7ab;
  border-radius: 5px;
  background: #f9f0da;
  color: #9e9c9c;
}
.bar1 button {
  top: 0;
  right: 0;
  background: #7ba7ab;
  border-radius: 0 5px 5px 0;
}
button.addbtn {
  position: absolute;
  left: -8vw;
  width: 5vw;
  color: black;
  border-radius: 26px;
}
button.clearBtn {
  margin-right: 45px;
  margin-top: 13px;
  padding-bottom: 16px;
  height: 15px;
  width: 15px;
  color: #f9f0da;
  border-radius: 50%;
  background-color: rgba(138, 127, 127, 0.671);
}
/* STYLE 删除按钮弹框 dialog */
.dialog-delete-btn button {
  height: 30px;
  margin: 20px 10px;
}

.dialog-delete-btn button:hover,
.dialog-edit-btn button:hover {
  color: #00adfd;
  background-color: rgba(163, 185, 255, 0.575);
}
/* STYLE 修改按钮弹框 dialog */
.dialog-edit-btn span {
  padding: 20px;
}
.dialog-edit-btn .input {
  padding: 20px;
}
.dialog-edit-btn .input input {
  height: 30px;
  width: 20vw;
  border-top: none;
  border-left: none;
  border-right: none;
  border-bottom: 1px solid rgb(61, 26, 107);
}
.dialog-edit-btn button {
  margin: 10px 10px;
  height: 25px;
}
</style>
